<template>
    <div class="mainBox">
        <div>
            <div class="optionBox">
                <Button type="primary" @click="openAddDialog">添加app版本</Button>
            </div>
            <Table stripe :columns="appVersionTable.columns" :data="appVersionTable.data"></Table>
        </div>
        <Drawer :title="appVersionDrawer.title" v-model="appVersionDrawer.display" width="720" :mask-closable="false">
            <i-form ref="formValidate" :model="appVersionDrawer.form.appVersion" :rules="appVersionDrawer.form.ruleValidate" :label-width="100">
                <FormItem label="版本号" prop="code" v-if="!appVersionDrawer.form.add">
                    <i-input v-model="appVersionDrawer.form.appVersion.code" disabled placeholder="版本号"></i-input>
                </FormItem>
                <FormItem label="版本名称" prop="name">
                    <i-input v-model="appVersionDrawer.form.appVersion.name" placeholder="版本名称"></i-input>
                </FormItem>
                <FormItem label="版本描述" prop="description">
                    <i-input v-model="appVersionDrawer.form.appVersion.description" placeholder="版本描述"></i-input>
                </FormItem>
                <FormItem label="APK下载地址" prop="apkUrl">
                    <i-input v-model="appVersionDrawer.form.appVersion.apkUrl" placeholder="APK下载地址"></i-input>
                </FormItem>
                <FormItem label="备注" prop="remark">
                    <i-input v-model="appVersionDrawer.form.appVersion.remark" placeholder="备注"></i-input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="validateForm('formValidate')">确定</Button>
                    <Button @click="appVersionDrawer.display=false" style="margin-left: 8px">取消</Button>
                </FormItem>
            </i-form>
        </Drawer>
    </div>
</template>

<script>
import ServerResponseCode from "@/utils/ServerResponseCode";
import AppVersionManage from "@/apis/AppVersionManage";

export default {
  data() {
    return {
      // app版本信息
      appVersionTable: {
        columns: [
          { key: "code", title: "版本号", width: 80 },
          { key: "name", title: "版本名称", width: 120 },
          { key: "description", title: "版本描述", width: 120 },
          { key: "apkUrl", title: "apk下载地址", width: 220 },
          { key: "remark", title: "备注信息", width: 120 },
          { key: "createTime", title: "创建时间", width: 160},
          { key: "updateTime", title: "修改时间", width: 160},
          {
            key: "action",
            title: "操作",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.openUpdateDialog(params.row);
                      }
                    }
                  },
                  "修改"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.openDeleteDialog(params.row.code);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            }
          }
        ],
        data: []
      },
      // 版本信息添加和修改的抽屉窗口
      appVersionDrawer: {
        title: "",
        display: false,
        form: {
          add: true,
          appVersion: {
            code: null,
            name: null,
            description: null,
            apkUrl: null,
            remark: null
          },
          ruleValidate: {
            name: [
              {
                required: true,
                message: "版本名称不可为空",
                trigger: "blur"
              }
            ],
            description: [
              {
                required: true,
                message: "版本描述不可为空",
                trigger: "blur"
              }
            ],
            apkUrl: [
              {
                required: true,
                message: "APK下载地址不可为空",
                trigger: "blur"
              }
            ]
          }
        }
      }
    };
  },
  methods: {
    loadList() {
      AppVersionManage.list().then((response) => {
        if (response.code === ServerResponseCode.SUCCESS) {
          this.appVersionTable.data = response.data;
        } else {
          this.$Message.warning(response.msg);
        }
      });
    },
    // 打开添加版本信息对话框
    openAddDialog() {
      this.appVersionDrawer.display = true;
      this.appVersionDrawer.form.add = true;
      this.appVersionDrawer.title = "添加APP版本信息";
      this.appVersionDrawer.form.appVersion.code = null;
      this.appVersionDrawer.form.appVersion.name = null;
      this.appVersionDrawer.form.appVersion.description = null;
      this.appVersionDrawer.form.appVersion.apkUrl = null;
      this.appVersionDrawer.form.appVersion.remark = null;
    },
    // 打开修改版本信息对话框
    openUpdateDialog(row) {
      this.appVersionDrawer.display = true;
      this.appVersionDrawer.form.add = false;
      this.appVersionDrawer.title = "修改APP版本信息";
      this.appVersionDrawer.form.appVersion.code = row.code;
      this.appVersionDrawer.form.appVersion.name = row.name;
      this.appVersionDrawer.form.appVersion.description = row.description;
      this.appVersionDrawer.form.appVersion.apkUrl = row.apkUrl;
      this.appVersionDrawer.form.appVersion.remark = row.remark;
    },
    // 打开删除版本信息对话框
    openDeleteDialog(code) {
      this.$Modal.confirm({
        title: "提示",
        content: "您确定要删除此版本信息吗？",
        onOk: () => {
          AppVersionManage.delete(code).then((response) => {
            if (response.code === ServerResponseCode.SUCCESS) {
              // 查询查询数据
              this.loadList();
            } else {
              this.$Message.warning(response.msg);
            }
          });
        },
        onCancel: () => {}
      });
    },
    // 对form进行校验
    validateForm(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.handleSubmit();
        } else {
          this.$Message.error("数据校验失败");
        }
      });
    },
    // 处理数据提交
    handleSubmit() {
      if (this.appVersionDrawer.form.add) {
        AppVersionManage.add(this.appVersionDrawer.form.appVersion).then((response) => {
          if (response.code === ServerResponseCode.SUCCESS) {
            this.$Message.success(response.msg);
            // 查询查询数据
            this.loadList();
          } else {
            this.$Message.warning(response.msg);
          }
        });
      } else {
        AppVersionManage.update(this.appVersionDrawer.form.appVersion)
        .then((response) => {
            debugger;
            if (response.code === ServerResponseCode.SUCCESS) {
              this.$Message.success(response.msg);
              // 查询查询数据
              this.loadList();
            } else {
              this.$Message.warning(response.msg);
            }
          }
        );
      }
      // 关闭抽屉弹窗
      this.appVersionDrawer.display = false;
    }
  },
  // 组件挂载时执行
  mounted() {
    this.loadList();
  }
};
</script>

<style scoped>
.mainBox {
  padding: 0 10px;
}
.optionBox {
    padding: 10px 0;
}
</style>


